<!-- <section class="content container-fluid"> -->
<div class="card-header">
  <div class="row">
    <div class="col-md-12">
      <filter-list
        request="request"
        callback="getList(pageIndex)"
      ></filter-list>
    </div>
  </div>
</div>
<div class="card-body">
  <table
    id="list-page"
    class="table table-sm table-hover sortable"
    cellspacing="0"
    ng-init="getList()"
  >
    <thead class="thead-light">
      <tr>
        <th scope="col" style="width: 3%">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
          ></small>
        </th>
        <th scope="col" style="width: 25%">SourceId</th>
        <th scope="col" width="10%">Type</th>
        <th scope="col" style="width: 10%">Alias</th>
        <th scope="col" width="10%">Created Date</th>
        <th scope="col" style="width: 5%"></th>
      </tr>
    </thead>

    <tbody dnd-list="data.items" dnd-disable-if="canDrag">
      <tr ng-if="canDrag">
        <td colspan="7">
          <small
            class="text-warning"
            ng-bind="translate('warning_can_not_drag_drop',true, '(Drag & Drop feature only active when priority is asc)')"
          ></small>
        </td>
      </tr>
      <tr
        ng-repeat="item in data.items"
        dnd-draggable="item"
        dnd-effect-allowed="move"
        dnd-selected="selected = item"
        dnd-moved="updateInfos($index)"
        ng-class="{'selected': selected === item}"
      >
        <td style="cursor: grab" class="drag-header">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
          ></small>
        </td>
        <td>
          <small>
            <span ng-bind-html="item.sourceId"></span>
          </small>
        </td>
        <td>
          <span ng-bind="item.type"></span>
        </td>
        <td>
          <span ng-bind="item.alias"></span>
        </td>
        <td>
          <small>
            {{item.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
          </small>
        </td>

        <td>
          <div
            class="btn-group btn-group-sm btn-group-sm float-end"
            role="group"
            aria-label="Actions"
          >
            <a
              href="/portal/url-alias/details/{{item.id}}"
              class="btn btn-link"
            >
              <span class="fas fa-pen text-primary"></span>
            </a>
            <a ng-click="remove(item.id);" class="btn btn-link">
              <span class="fas fa-trash-alt text-danger"></span>
            </a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="card-footer">
  <paging
    class="small"
    page="data.page"
    page-size="data.pageSize"
    total="data.totalItems"
    ul-class="pagination justify-content-end m-0"
    a-class="page-link"
    paging-action="getList(page-1)"
    scroll-top="true"
  ></paging>
</div>

<!-- </section> -->
